<template>
  
    <el-form  
      :model="value"
      label-width="150px"
      style="width:1000px;">

      <el-form-item label="商品相册:">
        <multiUpload
           upload-action="/manager/api/auth/product/upload_product"
           v-model="dealProductPic"
          />
      </el-form-item> 

      <el-form-item label="商品详情:">
         <quill-editor
            ref="phoneEditor"
            v-model="value.detailHtml"
            :options="editorOption"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @ready="onEditorReady($event)"
          />
      </el-form-item>


      <el-form-item>
        <el-button type="primary" size="medium" @click="handleNext">上一步,填写商品促销</el-button>
        <el-button type="primary" size="medium" @click="handleCommit">完成,提交商品</el-button>
      </el-form-item> 

     </el-form>   
       
</template>


<script>
  import multiUpload from '@/components/upload/multiUpload'
export default {
  name: 'productAttr',
  props:{
      value:Object,
      // 判断是编辑 还是添加
      isUpdate:{
        type:Boolean,
        default:false
      }
  },
  data(){
    return { 
      editorOption: {
          placeholder: '编辑文章内容'
      },
    }
  },
  components:{
    multiUpload 
  },
  computed:{
    // 商品主图 和 轮播图图片
    dealProductPic:{
      get(){
        let pics = [];
        // 1. 验证主图
        if(this.value.pic == null || this.value.pic == undefined || this.value.pic == ''){
          return pics;
        } 
        // 2 存在主图
        pics.push(this.value.pic)
        // 3 验证轮播图
        if(this.value.albumPics == null || this.value.albumPics == undefined || this.value.albumPics == ''){
          return pics;
        }
        // 4 存在轮播图
        let  albumPicsArr = this.value.albumPics.split(',')
        for(let i=0;i<albumPicsArr.legnth;i++){
          pics.push(albumPicsArr[i])
        } 
        return pics;
      },
      set(newValue){
        // console.log(newValue);
        if(newValue === null || newValue.length === 0){
          this.value.pic = null;
          this.value.albumPics = null
        }else{
          this.value.pic = newValue[0];
          this.value.albumPics = '';
          if(newValue.length > 1 ){
            for(var i=1;i<newValue.length;i++){
              this.value.albumPics += newValue[i];
              if(newValue.length - 1 !== i){
                this.value.albumPics += ','
              }
            } 
          }
          
        }

      }
    }
  },
  methods:{
    handleNext(){
      this.$emit('nextStep')
    },
    handleCommit(){ 
      this.$emit('finishComit',this.isUpdate)
    },
    onEditorBlur(quill) {
      console.log('editor blur!', quill)
    },
    onEditorFocus(quill) {
      console.log('editor focus!', quill)
    },
    onEditorReady(quill) {
      console.log('editor ready!', quill)
    },
    onEditorChange({ quill, html, text }) {
      console.log('editor change!', quill, html, text)
      this.value.detailHtml = html
    }
  }
}
</script>

<style lang="less">
//  npm install vue-quill-editor --save
.ql-editor{
    height:400px;
  }
</style>
